<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>分配角色</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<link rel="stylesheet" href="../../libme/modules/formselects/formSelects-v4.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
	<style type="text/css">
		/* 修改验证表单异常时提示颜色 */
		/*.layui-layer-tips .layui-layer-content {*/
			/*background-color: rgb(80, 80, 80) !important;*/
			/*color: #30ff00 !important;*/
		/*}*/
		/*.layui-layer-tips i.layui-layer-TipsB, .layui-layer-tips i.layui-layer-TipsT {*/
			/*border-right-color: rgb(80, 80, 80)!important;*/
		/*}*/
	</style>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<!--<form class="layui-form layui-form-pane ok-form">-->
	<form class="layui-form ok-form" lay-filter="sysuser-roles">
		<input type="hidden" id="userId" name="userId" value="" />

		<div class="layui-form-item">
			<label class="layui-form-label"> 登录账户：</label>
			<div class="layui-input-block">
				<input type="text" placeholder="用户账号" autocomplete="off" class="layui-input" lay-verify="required" lay-verType="tips" id="username" disabled>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label"> 分配角色：</label>
			<div class="layui-input-block">
				<div id="roleTransfer" class=""></div>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="user-roles">立即提交</button>
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../libme/pages/body.js"></script>
<script type="text/javascript">
	layui.use(["element","form","okLayer","jquery","okMock","api","transfer"], function () {
		let form = layui.form;
		let okLayer = layui.okLayer;
        let okMock = layui.okMock;
        let $ = layui.jquery;
        let api = layui.api;
        let transfer = layui.transfer;

        okLoading.close();

		// tree.render({
        // 	elem: "#permissionTree",
        // 	//data: okMock.api.permission.list,
        // 	data: data,//从本地 localStorage 中取值
        // 	showCheckbox: true
        // });

        form.on("submit(user-roles)", function (data) {
			// TODO 权限节点校验

            var listed = transfer.getData('roleTransfer');
            if(listed.length <= 0){
                api.yellowSighMsg("请至少给当前用户分配一个角色");
			}
            var ids = [];
            $.each(listed, function (idx, obj) {
                ids.push(obj.value);
            });
            if(ids.length > 0) {
                api.request({
                    url:okMock.api.user.regrantUserRoles,
                    where: {userId: $('#userId').val(), roleIds: ids},
                    dataType: api.jsonType.ujson,
                    traditional:true
                },function (resp, stat) {
                    okLayer.greenTickMsg("修改成功", function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    });
                })
            }
			return false;
		});

        $(function () {//页面加载
			$.ajax({
				url:okMock.api.role.findTransferList,
				data:{userId: $('#userId').val().trim()},
				type:'post',
				dataType:api.jsonType.ujson,
				success: function (resp, stat) {
				    if(resp.code == api.responseCode.success) {
						var parlist = resp.extend.parlist;
						var sublist = resp.extend.sublist;
                        var values = new Array();
                        $.each(sublist, function(idx, obj){
                            values.push(obj.roleId);
                        });
                        transfer.render({
                            elem: '#roleTransfer'
                            ,title: ['未分配角色', '已分配角色']  //自定义标题
                            ,data: parlist
                            ,value: values
                            ,parseData: function(res){//res行数组
                                return {
                                    "value": res.roleId //数据值
                                    ,"title": res.roleName //数据标题
                                    //,"disabled": false  //是否禁用
                                    //,"checked": false //是否选中
                                }
                            }
                            ,id:'roleTransfer'
                            ,height: 400
                        })
                    }
                }
			})
        })
	})
</script>
</body>
</html>
